<template>
	<view class="home">
		
		<scroll-view scroll-x class="scrollNav" >
			<view class="item" 
				:class="index==navIndex?'active':'' " 
				v-for="(item,index) in navArr" 
				:key="item.id"  
				@click="clickNav(index,item.id)">
				
				{{ item.classname }}
				
			</view>
		</scroll-view>
		
		<view class="content">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<newsbox @click.native="goDetail(item)" :item="item"></newsbox>
			</view>
		</view>
		
		<view class="nodata" v-if="!newsArr.length">
			<image src="../../static/images/no-data.png" mode="widthFix"></image>
		</view>
		
		<view class="loading" v-if="newsArr.length">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多～～</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				//初始化数据
				currentCid:0,		//当前新闻类id
				currentPage:1,		//当前列表页页吗，默认为第一页
				navIndex:0,			//导航选项栏数组下标，默认为第一个
				navArr:[],			//导航选项栏数据数组
				newsArr:[],			//新闻列表数据数组
				loading:0			//下拉页面加载状态，1:加载更多，2:没有更多
			}
		},
		//生命周期函数，页面第一次加载时触发的方法
		onLoad() {
			//获取导航选项栏数据
			this.getNavData()
			//获取新闻列表数据
			this.getNewsData()
		},
		//生命周期函数，页面下拉触底时触发的方法
		onReachBottom(){
			//没有更多的数据，终止继续发起获取新闻列表数据网络请求
			if(this.loading == 2){
				return
			}
			//下拉时，当前页面自加一，以便获取下一页的数据
			this.currentPage++
			//设置加载状态，加载更多时值为1
			this.loading=1
			//获取新闻列表数据
			this.getNewsData(this.currentCid)
		},
		methods: {
			//切换导航栏选项卡触发的事件方法
			clickNav(index,id){
				//切换了新闻类目，重新初始化页码等参数
				this.currentPage=1
				this.navIndex=index
				this.currentCid=id
				this.newsArr=[]
				this.loading=0
				this.getNewsData(id)
			},
			//点击具体新闻，跳转到新闻详情页
			goDetail(item){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			//获取导航栏选项卡项目
			getNavData(){
				//发起网络请求，获取获取导航栏选项卡接口数据
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					//请求成功，回调处理
					success:res=>{
						//将获取的接口数据，赋值于导航栏选卡数组，用于数据渲染
						this.navArr=res.data
						this.currentCid = res.data[0].id
					}
				})
			},
			//获取新闻列表数据
			getNewsData(id=50){
				//发起网络请求，获取获取新闻列表接口数据
				uni.request({
					//请求接口url
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
					//接口请求参数
					data:{
						cid:id,
						page:this.currentPage
					},
					//成功回调处理
					success:res=>{
						//没有数据返回了，改变页面加载状态
						if(res.data.length==0){
							this.loading=2
						}
						//合并数组数据
						this.newsArr=[...this.newsArr,...res.data]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.scrollNav{
	height: 100rpx;
	background: #f7f8fa;
	white-space: nowrap;
	position: fixed;
	//兼容处理顶部选项卡在不同设备下距离问题
	top: var(--window-top);
	left: 0;
	z-index: 10;
	//深度处理，选项卡默认滚动条问题
	/deep/ ::-webkit-scrollbar{
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
		display: block;
	}
	//新闻列表项样式
	.item{
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding: 0 30rpx;
		color: #333;
		&.active{
			color: #31c27c;
		}
	}
}
//内容容器样式
.content{
	padding: 30rpx;
	padding-top: 130rpx;
	.row{
		border-bottom: 1rpx dotted #efefef;
		padding: 20rpx 0;
		
	}
}
//没数据时样式
.nodata{
	display: flex;
	justify-content: center;
	image{
		width: 360rpx;
	}
}
//下来页面数据加载样式
.loading{
	text-align: center;
	font-size: 26rpx;
	color: #888;
	line-height: 2em;
}
</style>
